<template>
  <el-tree :data="data"
           :props="defaultProps"
           node-key="menuid"
           :show-checkbox="showbox"
           default-expand-all
           @node-drag-start="handleDragStart"
           @node-drag-enter="handleDragEnter"
           @node-drag-leave="handleDragLeave"
           @node-drag-over="handleDragOver"
           @node-drag-end="handleDragEnd"
           @node-drop="handleDrop"
           draggable
           :allow-drop="allowDrop"
           :allow-drag="allowDrag"
           @node-click="click"
           @check-change="handleCheckChange"
           @check="handleCheck">
  </el-tree>
</template>

<script>
export default {
  props: ['reload', 'showbox'],
  data() {
    return {
      data: [],
      //它应该是用来替换属性名称的
      defaultProps: {
        id: 'menuid',
        children: 'menus',
        label: 'menuname',
      },
    }
  },
  //
  watch: {
    //使用父组件传子组件的方式，来触发子组件的某个值的改变，然后通过监听，触发reload更新方法
    reload: function (newValue, oldValue) {
      this.reloadMethod()
    },
  },
  created() {
    this.reloadMethod()
  },
  methods: {
    // // click点击事件
    // click(data) {
    //   //   console.log(data)
    //   this.$emit('callfather', data)
    // },
    handleCheck(node, choise) {
      //所有被选中的数组
      var arr = choise.checkedKeys
      this.$emit('choiseMethod', arr)
      console.log('我勾选的菜单的id', arr)
    },
    handleCheckChange(data, checked, indeterminate) {
      console.log(data, checked, indeterminate)
    },
    //初始化数据获取的
    reloadMethod() {
      this.$axios
        .get('/rbacMenu/getAllMenu')
        .then((res) => {
          this.data = res.data.data
        })
        .catch()
    },
    // click点击事件
    click(data) {
      console.log('click', data)
      this.$emit('callfather', data)
    },
    handleDragStart(node, ev) {
      //   console.log('drag start', node)
    },
    handleDragEnter(draggingNode, dropNode, ev) {
      //   console.log('tree drag enter: ', dropNode.label)
    },
    handleDragLeave(draggingNode, dropNode, ev) {
      //   console.log('tree drag leave: ', dropNode.label)
    },
    handleDragOver(draggingNode, dropNode, ev) {
      //   console.log('tree drag over: ', dropNode.label)
    },
    handleDragEnd(draggingNode, dropNode, dropType, ev) {
      console.log('tree drag end: ', dropNode && dropNode.label, dropType)
      this.$axios
        .get(
          '/rbacMenu/updateMenu/' +
            dropNode.data.menuid +
            '/' +
            draggingNode.data.menuid
        )
        .then((res) => {
          console.log(res)
        })
        .catch()
    },
    handleDrop(draggingNode, dropNode, dropType, ev) {
      //   console.log('tree drop: ', dropNode.label, dropType)
    },
    allowDrop(draggingNode, dropNode, type) {
      if (dropNode.data.label === '二级 3-1') {
        return type !== 'inner'
      } else {
        return true
      }
    },
    allowDrag(draggingNode) {
      return draggingNode.data.menuname.indexOf('三级 3-2-2') === -1
    },
  },
}
</script>